<!--
 * @Author: Xujianchen
 * @Date: 2024-12-16 11:29:34
 * @LastEditors: Xujianchen
 * @LastEditTime: 2024-12-17 10:43:27
 * @Description: 常用时间、日期操作
-->
<template>
  <Wrapper>
    <card-form shadow="never" style="margin-top: 0">
      <!-- 计算2个日期相差天数 -->
      <el-divider content-position="left">计算2个日期相差天数</el-divider>
      <el-row :gutter="30">
        <col-wrapper label-width="0">
          <el-date-picker
            v-model="range"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          />
        </col-wrapper>
        <col-wrapper label-width="0">
          <el-input
            :model-value="getDiffDay(range[0], range[1])"
            disabled
            placeholder="选择开始、结束时间后显示"
          />
        </col-wrapper>
      </el-row>
      <!-- 比较2个日期时间大小 -->
      <el-divider content-position="left">比较2个日期时间大小</el-divider>
      <el-row :gutter="30">
        <col-wrapper label-width="0">
          <el-date-picker
            v-model="range2"
            type="datetime"
            placeholder="选择第一个时间"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </col-wrapper>
        <col-wrapper label-width="0">
          <el-date-picker
            v-model="range3"
            type="datetime"
            placeholder="选择第二个时间"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </col-wrapper>
        <col-wrapper label-width="0">
          <el-button type="primary" @click="calculate">比较</el-button>
        </col-wrapper>
        <div v-if="compareText" style="padding-left: 15px">
          {{ range2 }} 比 {{ range3 }} <mark>{{ compareText }}</mark>
        </div>
      </el-row>
      <!-- 判断某个日期是否在指定日期范围内 -->
      <el-divider content-position="left"
        >判断某个日期是否在指定日期范围内</el-divider
      >
      <el-row :gutter="30">
        <col-wrapper label-width="0">
          <el-date-picker
            v-model="date2"
            type="date"
            placeholder="请选择需要判断的日期"
            value-format="YYYY-MM-DD"
          />
        </col-wrapper>
        <col-wrapper label-width="0">
          <el-date-picker
            v-model="range4"
            type="daterange"
            range-separator="-"
            start-placeholder="判断的开始日期"
            end-placeholder="判断的结束日期"
            value-format="YYYY-MM-DD"
          />
        </col-wrapper>
        <col-wrapper label-width="0">
          <el-button type="primary" @click="checkIsBetween">判断</el-button>
        </col-wrapper>
      </el-row>
      <!-- 操作日期时间 -->
      <el-divider content-position="left">操作日期时间</el-divider>
      <el-row :gutter="30">
        <col-wrapper label-width="0">
          <el-date-picker
            v-model="date1"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择日期"
          />
        </col-wrapper>
        <col-wrapper label-width="0">
          <el-input-number v-model="number" :min="1" style="width: 100%" />
        </col-wrapper>
        <col-wrapper label-width="0">
          <el-button type="primary" @click="adjustDate('subtract')"
            >减少</el-button
          >
          <el-button type="primary" @click="adjustDate('add')">增加</el-button>
        </col-wrapper>
      </el-row>
      <!-- 时间戳、日期相互转换 -->
      <el-divider content-position="left">时间戳、日期相互转换</el-divider>
      <el-row :gutter="30">
        <col-wrapper label-width="0">
          <el-input v-model="timestamp" placeholder="请输入时间戳或日期">
            <template #append>
              <el-button @click="timestamp = getCurrentTimestamp()"
                >获取当前时间戳</el-button
              >
            </template>
          </el-input>
        </col-wrapper>
        <col-wrapper label-width="0">
          <el-button
            type="primary"
            @click="timestamp = convertDateOrTimestamp(timestamp)"
            >转换</el-button
          >
        </col-wrapper>
      </el-row>
      <!-- 是否是闰年 -->
      <el-divider content-position="left">是否是闰年</el-divider>
      <el-row :gutter="10">
        <col-wrapper label-width="0">
          <el-date-picker
            v-model="year"
            type="year"
            value-format="YYYY"
            placeholder="请选择年份"
            @change="handleYearChange"
          />
        </col-wrapper>
      </el-row>
    </card-form>
  </Wrapper>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import {
  getDiffDay,
  compareDate,
  adjustDays,
  convertDateOrTimestamp,
  getCurrentTimestamp,
  isLeapYear,
  isBetween,
} from '@/app/date'
import CardForm from '@/components/wrapper/card-form'
import ColWrapper from '@/components/wrapper/col'

const range = ref('')
const range2 = ref('')
const range3 = ref('')
const compareText = ref('')
const date1 = ref('')
const number = ref(1)
const timestamp = ref('')
const year = ref('')
const date2 = ref('')
const range4 = ref('')

function calculate() {
  const r2 = range2.value
  const r3 = range3.value
  if (!r2 || !r3) return

  const flag = compareDate(r2, r3)
  compareText.value = !flag ? '小' : '大'
}

function adjustDate(type) {
  const d = date1.value
  if (!d) return
  const newDate = adjustDays(d, number.value, type)
  date1.value = newDate
}

function handleYearChange() {
  const y = year.value
  if (!y) return
  const isLeap = isLeapYear(y)
  ElMessage.success(isLeap ? y + '是闰年' : y + '不是闰年')
}

function checkIsBetween() {
  const r4 = range4.value
  const d2 = date2.value
  const isBetweenDate = isBetween(date2.value, r4[0], r4[1])

  ElMessage.success(
    `${d2}${isBetweenDate ? '在' : '不在'}${r4[0]} - ${r4[1]}之间`,
  )
}
</script>
